jQuery tippek, amiket mindenkinek tudni érdemes

Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő.

További nagyszerű listákért tekintsd meg [@sindresorhus](https://github.com/sindresorhus/) válogatott listáját.

Tartalomjegyzék

Tippek

Használat noConflict()
Betöltött-e a jQuery? - Ellenőrzés
Ellenőrizze, hogy van-e elem
.on() binding (“kötés”) használata .click() helyett
‘Vissza az elejére’ gomb
Képek előbetöltése
Betöltöttek-e a képek? - Ellenőrzés
Betölt(het)etlen képek automatikus javítása
Űrlap elküldése AJAX-al
CSS osztály aktiválása a kurzor hatására
Beviteli mezők kikapcsolása
Linkbetöltés megállítása
jQuery kiválasztók eltárolása
Áttűnés/becsúszás effekt rögzítése
Egyszerű accordion (harmonika-menü)
HTML div elemek egyező magassággal
Külső linkek megnyitása új fülön/ablakban
Elemek keresése szöveg alapján
Script aktiválás láthatóság változása esetén
AJAX hívások hibakezelése
Plugin hívások láncolása
Listaelemek sorba rendezése ABC szerint
Jobb egérkattintás kikapcsolása

Használat `noConflict()`

A jQuery által használt $ álnevet más JavaScript könyvtárak is használják. Annak érdekében, hogy a jQuery ne ütközzön a különböző könyvtárak $ objektumával, használja a noConflict() metódust a dokumentum elején:

jQuery.noConflict();

Most a jQuery objektumra a jQuery változónevet a $ (például jQuery('div p')hide()). Ha a jQuery több verziója ugyanazon az oldalon található, akkor a noConflict () paranccsal adhat meg egy álnevet egy adott verzióhoz:

let $x = jQuery.noConflict();

^{vissza a tartalomjegyzékhez}

Betöltött-e a jQuery? - Ellenőrzés

Mielőtt bármihez is kezdhetnél a jQuery-vel, először biztosra kell menned abban, hogy betöltött:

if (typeof jQuery == 'undefined') {
  console.log('jQuery hasn\'t loaded');
} else {
  console.log('jQuery has loaded');
}

Most, hogy elstartoltunk…

^{vissza a tartalomjegyzékhez}

Ellenőrizze, hogy van-e elem

A HTML elem használata előtt meg kell győződnie arról, hogy része a DOM-nak.

if ($("#selector").length) {
  //csinálj valamit az elemmel
}

^{vissza a tartalomjegyzékhez}

`.on()` binding (“kötés”) használata `.click()` helyett

Az .on() függvény használata számos előnnyel rendelkezik a .click() megoldással szemben, mint például: több esemény egyszeri hozzáadása…

.on('click tap hover')

…a kötés alkalmazása dinamikusan létrehozott elemekre is (tehát nem kell egyesével végrehajtani a kötést minden dinamikus DOM elemre)…

…és a névterek felállításának lehetősége:

.on('click.menuOpening')

Névterek segítségével “lecsatolhatsz” egyes konkrét eseményeket (pl. .off('click.menuOpening')).

^{vissza a tartalomjegyzékhez}

‘Vissza az elejére’ gomb

Hála a jQuery animate és scrollTop eljárásainak, nincs szükséged pluginokra ahhoz, hogy létrehozz egy egyszerű ‘scroll-to-top’ animációt:

// Back to top
$('.container').on('click', '.back-to-top', function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});

<!-- Create an anchor tag -->
<div class="container">
  <a href="#" class="back-to-top">Back to top</a>
</div>

A scrollTop értékének változtatásával beállíthatod, hova szeretnéd, hogy érkezzen a görgetősáv. Igazából amit csinálsz, az annyi, hogy a látható részt animálod egy 800 miliszekundumos időtartamon belül, aminek a végére ez aztán “felgurul” a dokumentum tetejére.

Megjegyzés: Figyelj oda a scrollTop esetenkénti bugos viselkedésére.

^{vissza a tartalomjegyzékhez}

Képek előbetöltése

If your web page uses a lot of images that aren’t visible initially (e.g., on hover) it makes sense to preload them:

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('<img>').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

^{vissza a tartalomjegyzékhez}

Betöltöttek-e a képek? - Ellenőrzés

Alkalmanként szükséges lehet rá. hogy leellenőrizd, teljesen betöltöttek-e a képeid, annak érdekében, hogy folytatódhasson a scripted lefutása:

$('img').on('load', function () {
  console.log('image load successful');
});

Ezen felül azt is leellenőrizheted, hogy egy konkrét kép betöltött-e: mindössze cseréld le a fenti kódban az <img> címkét egy megfelelő azonosíra (ID) vagy osztályra.

^{vissza a tartalomjegyzékhez}

Betölt(het)etlen képek automatikus javítása

Ha úgy alakul, hogy ‘törött képlinkeket’ találsz az oldaladon, egyenként mindet lecserélni fájdalmasan hosszú és kimerítő folyamat lenne. Ez az egyszerű kódrészlet sok fejfájástól megkímélhet:

$('img').on('error', function () {
  if(!$(this).hasClass('broken-image')) {
    $(this).prop('src', 'img/broken.png').addClass('broken-image');
  }
});

Alternatívaként, ha egyszerűen csak el kívánod rejteni ezeket a betölt(het)etlen képeket, ez a kódrészlet gondoskodik róla:

$('img').on('error', function () {
  $(this).hide();
});

^{vissza a tartalomjegyzékhez}

Űrlap elküldése AJAX-al

A jQuery AJAX eljárások elterjedt módjai szöveges, HTML, XML vagy JSON állományok lekérésének. Ha egy egyszerű űrlapot kívánsz AJAX-on keresztül elküldeni, a felhasználói bemenetet össze tudod gyűjteni a val() eljárás segítségével:

$.post('sign_up.php', {
  user_name: $('input[name=user_name]').val(),
  email:     $('input[name=email]').val(),
  password:  $('input[name=password]').val(),
});

A val() hívások ugyanakkor számításigényesek. Felhasználói input begyűjtésére kedvezőbb módszer a serialize() függvény használata, ami ezeket string-ként gyűjti be:

$.post('sign_up', $('#sign-up-form').serialize());

^{vissza a tartalomjegyzékhez}

CSS osztály aktiválása a kurzor hatására

Tegyük fel, hogy egy kattintható elem megjelenését szeretnéd megváltoztatni, amikor egy felhasználó a kurzorával éppen fölötte áll. (:hover)

Elemedhez hozzáadhatsz egy vagy több CSS osztályt ilyen esetekben; amikor a felhasználó arrébb viszi a kurzort, az osztály automatikusan eltávolításra kerül az elemről:

$('.btn').on('hover', function () {
  $(this).addClass('hover');
}, function () {
  $(this).removeClass('hover');
});

Innentől már csak a szükséges CSS-t kell hozzáadnod. Viszont egy még egyszerűbb módszerért használhatod a toggleClass eljárást is:

$('.btn').on('hover', function () {
  $(this).toggleClass('hover');
});

Megjegyzés: a CSS gyorsabb megoldás lehet ebben az esetben, mindazonáltal érdemes tudnod róla, hogy ilyet is lehet.

^{vissza a tartalomjegyzékhez}

Beviteli mezők kikapcsolása

Alkalmanként előfordulhat, hogy érdekedben áll kikapcsolni a “küldés” gombot egy űrlapon, vagy letiltani egy vagy több szövegbeviteli mezőt, amíg a felhasználó végre nem hajt egy bizonyos akciót (pl. bepipálja az “elolvastam a felhasználói feltételeket” jelölőnégyzetet). Adj hozzá egy disabled tulajdonságot a beviteli mezőidhez, így kedved szerint (de)aktiválhatod őket:

$('input[type="submit"]').prop('disabled', true);

Nem kell mást tenned, mint újra futtatni a prop eljárást az adott beviteli mező(kö)n, ezúttal false értékkel:

$('input[type="submit"]').prop('disabled', false);

^{vissza a tartalomjegyzékhez}

Linkbetöltés megállítása

Alkalmanként előfordulhat, hogy egy linkre kattintva nem kívánsz se betölteni egy bizonyos weboldalt, se ugyanazt az oldalt újra, hanem valami másra kell, mint például valami más script aktiválása. Ez a kód megelőzi az alapértelmezett akció lefutását:

$('a.no-link').on('click', function (e) {
  e.preventDefault();
});

^{vissza a tartalomjegyzékhez}

jQuery kiválasztók eltárolása

Gondolj bele, milyen sokszor kellett ugyanazt a kiválasztót (selector) leírnod újra meg újra. Minden $('.elem') kiválasztó újra meg újra végig kell böngéssze a teljes DOM-ot akárhányszor meghívod - függetlenül attól, hogy az a kiválasztó egyszer volt-e már futtatva. Szóval helyette futtasd a kiválasztót egyszer, és tárold el az eredményét egy változóban:

var blocks = $('#blocks').find('li');

Most már használhatod s blocks változót akárhányszor csak akarod, anélkül, hogy a DOM-ot át kelljen böngészni érte:

$('#hideBlocks').on('click', function () {
  blocks.fadeOut();
});

$('#showBlocks').on('click', function () {
  blocks.fadeIn();
});

A jQuery kiválasztók eltárolása egy roppant egyszerű teljesítményjavító technika.

^{vissza a tartalomjegyzékhez}

Áttűnés/becsúszás effekt rögzítése

A becsúszások és az áttűnések olyan tuajdonságok, amiket előszeretettel használunk animációkhoz a jQuery-ben. Lehet, hogy csak akkor szeretnéd láthatóvá tenni az adott elemet, amikor a felhasználó rákattint valamire, amire a fadeIn és slideDown eljárások tökéletesek. De ha azt szeretnéd, hogy az adott elem első kattintásra felbukkanjon, majd a másodikre eltűnjön, ez pont megfelel a célra:

// Fade
$('.btn').on('click', function () {
  $('.element').fadeToggle('slow');
});

// Toggle
$('.btn').on('click', function () {
  $('.element').slideToggle('slow');
});

^{vissza a tartalomjegyzékhez}

Egyszerű accordion (harmonika-menü)

Íme egy egyszerá eljárás egy egyszerű harmonika-menü elkészítésére:

// Close all panels
$('#accordion').find('.content').hide();

// Accordion
$('#accordion').find('.accordion-header').on('click', function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

Ezen script hozzáadásával már nincs már feladatot hátra a weboldaladon, mint a szükséges HTML elkészítése ahhoz, hogy ezt működésre bírd.

^{vissza a tartalomjegyzékhez}

HTML div elemek egyező magassággal

Néha szükséged lehet arra, hogy két HTML div elem egyforma magas legyen, függetlenül azok belső tartalmától:

$('.div').css('min-height', $('.main-div').height());

Ez a példa beállít egy min-height értéket, ami azt jelenti, hogy a kiválasztott elemnek megengedjük, hogy a fő div-nél nagyobb legyen, de azt nem, hogy kisebb.

Egy rugalmasabb megoldás ciklusban végigmenni elemek egy adott halmazán, és azok közül a legmagasabbéhoz állítani a kérdéses elem magasságát:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

Ha minden minden oszop magasságát egyformára akarod:

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

Megjegyzés: Erre sok megoldás van CSS-ben de a szükségleteidtől függően, érdemes lehet tudni, hogyan is megy ez jQuery-ben.

^{vissza a tartalomjegyzékhez}

Külső linkek megnyitása új fülön/ablakban

Külső linkek új böngészőfülön vagy -ablakban megnyitása, és annak biztosítása, hogy az azonos forrású linkek ugyanabban a fülben/ablakban nyílnak meg:

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

Megjegyzés: window.location.origin nem működik IE10-ben. Ez a javítás gondoskodik erről a problémáról.

^{vissza a tartalomjegyzékhez}

Elemek keresése szöveg alapján

A jQuery contains() kiválasztójának használatával megtalálhatsz szöveg(részlet)eket egy elem tartalmában. Ez a kód, ha nem talál szöveget az elemben, elrejti azt:

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

^{vissza a tartalomjegyzékhez}

Script aktiválás láthatóság változása esetén

Javascript aktiválásra amikor a felhasználó ellapoz egy fülről, vagy visszalép oda:

$(document).on('visibilitychange', function (e) {
  if (e.target.visibilityState === 'visible') {
    console.log('Tab is now in view!');
  } else if (e.target.visibilityState === 'hidden') {
    console.log('Tab is now hidden!');
  }
});

^{vissza a tartalomjegyzékhez}

AJAX hívások hibakezelése

Amikor egy AJAX hívás HTTP 404 vagy 500 hibával tér vissza, a hibakezelő végrehajtásra kerül. Ha a hibakezelő nincs definiálva, további jQuery kódok potenciálisan működésképtelenné válnak. Definiálj egy globális AJAX hibakezelőt:

$(document).on('ajaxError', function (e, xhr, settings, error) {
  console.log(error);
});

^{vissza a tartalomjegyzékhez}

Plugin hívások láncolása

A jQuery lehetővé teszi plugin eljáráshívások “láncolását” a DOM ismételt lekérése folyamatának enyhítésére, valamint több jQuery objektum létrehozására. Tegyük fel, hogy az alábbi kódtöredék jelképezi a plugin eljáráshívásaid:

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

Ekkor igen komoly teljesítményövekedést érhetsz el láncolás használatával:

$('#elem')
  .show()
  .html('bla')
  .otherStuff();

Alternatívaként eltárolhatod az elemet egy változóban ($ előtaggal):

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

Mind a láncolás, mint az eltárolás eljárásai “legjobb gyakorlatnak” (best practice) tekinthetők jQuery-ben, és rövidebb, gyorsabb kódot eredményeznek.

^{vissza a tartalomjegyzékhez}

Listaelemek sorba rendezése ABC szerint

Tegyük fel, hogy egy listádban túl sok elem van. Mondjuk a lista tartalma egy CMS által került legenerálásra, és te szeretnéd ezt ABC-sorba rendezni:

var ul = $('#list'),
lis = $('li', ul).get();

lis.sort(function (a, b) {
  return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
});

ul.append(lis);

Meg is volnánk!

^{vissza a tartalomjegyzékhez}

Jobb egérkattintás kikapcsolása

Ha le szeretnéd tiltani a jobb-klikket, az egész oldalra megteheted…

$(document).ready(function () {
  $(document).bind('contextmenu', function (e) {
    return false;
  })
})

…de akár egy konkrét elemre is:

$(document).ready(function () {
  $('#submit').bind('contextmenu', function (e) {
    return false;
  })
})

^{vissza a tartalomjegyzékhez}

Támogatás

A Chrome, Firefox, Safari, Opera, Edge és IE11 böngészők jelenlegi verziói.

^{vissza a tartalomjegyzékhez}